import {
  Button,
  Form,
  FormItem,
  InputNumber,
  message,
  Modal,
  RadioButton,
  RadioGroup,
  Space,
  TypographyText
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { omit } from 'xe-utils'

import { marketingApi, rechargeApi } from '@/apis'
import { BynGoodsItem } from '@/apis/rechargeTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useDialog } from '@/hooks'
import { bus, optionsToMap } from '@/utils'
import { handlePrice } from '@/utils/bsshow'

export default defineComponent({
  name: 'BynGoodsManage',
  setup() {
    const dialogLoading = ref(false)
    const showDialog = ref(false)
    const rechargeType = ref(1) //0-电费,1-话费
    const { showConfirm } = useDialog()

    const tableRef = ref({} as ProTableRef)
    const optionItemCur = ref({} as BynGoodsItem)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: 'ID',
            field: 'id'
          },
          {
            title: '商品名称',
            field: 'name'
          },
          {
            title: '第三方价格',
            field: 'price',
            formatter: ({ cellValue }) => {
              return '￥' + cellValue
            }
          },
          {
            title: '我方价格',
            slots: {
              default: 'salePrice'
            }
          },
          {
            title: '状态',
            slots: {
              default: 'status'
            }
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 180
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          props: {
            result: 'data',
            total: 'data.length'
          },
          ajax: {
            query: async () => {
              const data = await rechargeApi.getGoodsList(rechargeType.value)
              const result = { data: data }
              return result
            }
          }
        }
      }
    } as ProTableProps)

    //刷新
    async function refresh() {
      await tableRef.value.table.commitProxy('query')
    }

    //编辑
    function handleEdit(row: BynGoodsItem) {
      optionItemCur.value = JSON.parse(JSON.stringify(row))
      optionItemCur.value['priceNow'] = handlePrice(row.payPrice, row.payGold)
      showDialog.value = true
    }
    //编辑确定
    async function dialogConfirm() {
      dialogLoading.value = true
      try {
        await rechargeApi.editGoods(
          optionItemCur.value.id,
          optionItemCur.value.payPrice,
          optionItemCur.value.payGold,
          optionItemCur.value.showStyle
        )
        refresh()
        showDialog.value = false
      } finally {
        dialogLoading.value = false
      }
    }

    //上下架
    function handleDownUp(row: BynGoodsItem) {
      showConfirm({
        content: `请确认是否${row.status == 0 ? '上架' : '下架'}该商品?`,
        onOk: async () => {
          try {
            await rechargeApi.upDownGoods(row.id)
            refresh()
            message.success('操作完成')
          } catch (error) {}
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      rechargeType,
      dialogLoading,
      showDialog,
      optionItemCur,
      dialogConfirm,
      handleDownUp,
      refresh,
      handleEdit
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            salePrice: ({ row }) => {
              return <Space>{handlePrice(row.payPrice, row.payGold)}</Space>
            },
            status: ({ row }) => {
              return (
                <Space>
                  {row.status == 0 ? (
                    <TypographyText type="danger">下架</TypographyText>
                  ) : (
                    <TypographyText type="success">上架</TypographyText>
                  )}
                </Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleEdit(row)}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDownUp(row)}
                >
                  {row.status === 0 ? '上架' : '下架'}
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showDialog}
          confirmLoading={this.dialogLoading}
          title={'编辑'}
          onOk={this.dialogConfirm}
        >
          <Form labelCol={{ span: 4 }}>
            <FormItem>
              <p>{'当前价格：' + this.optionItemCur['priceNow']}</p>
            </FormItem>
            <FormItem label={'价格'}>
              <InputNumber
                v-model:value={this.optionItemCur.payPrice}
                placeholder="请输入"
                min={0}
                max={1000}
                precision={2}
                style={{ width: '200px' }}
              />
            </FormItem>
            <FormItem label={'金豆'}>
              <InputNumber
                v-model:value={this.optionItemCur.payGold}
                placeholder="请输入"
                min={0}
                max={1000}
                precision={2}
                style={{ width: '200px' }}
              />
            </FormItem>
            <FormItem label={'促销样式'}>
              <a-input
                v-model:value={this.optionItemCur.showStyle}
                placeholder="请输入"
                style={{ width: '200px' }}
              />
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
})
